<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      #box{
        width: 100%;
        height: 100%;
        background-color:#F1F3F4;
      }
      div{
        width: 500px;
        height: 500px;
        margin: 0 auto;
      }
    </style>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body id="box">
 <div>
     <h2>用户注册</h2>
    <hr>
    <!-- label标签为input元素定义标注(标记)，它不会向用户呈现任何特殊效果，和span标签类似。但label标签和span标签最大的区别就是它为鼠标用户改进了可用性，可以通过for和id名关联特定的表单控件。
    label标签和特定表单控件关联之后，如果用户在 label 元素内点击文本，就会触发关联的表单控件。就是说，当用户选择该label标签时，浏览器就会自动将焦点转到和label标签相关的表单控件上。 -->
    <label for="username">用户名</label>
    <input type="text" placeholder="请输入用户名" id="username" class="form-control"><br>
    <label for="password">密码</label>
    <input type="text" placeholder="请输入密码" id="password" class="form-control"><br>
    <label for="repassword">再次输入密码</label>
    <input type="text" placeholder="请再次输入密码" id="repassword" class="form-control"><br>
    <label for="realname">真实姓名</label>
    <input type="text" placeholder="请输入用户真实姓名" id="realname" class="form-control"><br>
    <button id="btn" class="btn btn-primary">注册</button>
 </div>
    <script src="jquery.min.js"></script>
    <script src="address.js"></script>
    <script>
       $("#btn").click(function(){
        //   let username=$("#username").val()
        //   let password=$("#password").val()
          let repassword=$("#repassword").val()
          console.log(repassword)
          if($("#password").val()!==$("#repassword").val()){
              alert("两次密码输入不一致")
              return
          }
        //   if(password!==repassword){
        //       alert("两次密码输入不一致")
        //       return
        //   }
          // 点击按钮之后发送ajax请求,并且发送请求参数
        //   问题：中英文符号：冒号
          $.ajax({
              url:"http://10.35.170.247:8080/adduser",//请求的路由地址
              method:"GET",
              data:{
                  username:$("#username").val(),
                  password:$("#password").val(),
                  realname:$("#realname").val()
              },//参数
              success(data){
                  console.log(data)
                  if(data==="success"){
                    //   如果注册成功就跳转到登录页面
                      location.href="denglu.html"
                  }
              }
          })
      })  
    </script>
</body>
</html>